/**
 * 详情
 */
import React  from 'react'
import style from './index.less'
import {Card,Row,Col,Table} from 'antd'
import moment from 'moment'
import {KCharts} from '../../components'
import fx from '../../../../components/investmentAnalysis/utils/fx'
import smileImg from '../../../../assets/images/smile.png';
import sadImg from '../../../../assets/images/sad.png';

const TradeDetail=({data,tradesListProps})=>{
	if(data&&data.trader){
		const tradeTableProps={
			dataSource:data.closeOrder.closedPositionList,
			columns:[
			  {
			    title: '股票代码',
			    dataIndex: 'symbol',
			    key: 'symbol',
			  },
			  {
			    title: '类型',
			    dataIndex: 'tradeType',
			    key: 'tradeType',
			  	sorter: (a, b) => a.tradeType - b.tradeType,
					render: (text, row, index) => text==='Buy'?<span style={{color:"red"}}>做多</span>:<span style={{color:"green"}}>做空</span>
			  },
				{
			    title: '买入价格',
			    dataIndex: 'buyPrice',
			    key: 'buyPrice',
			  	sorter: (a, b) => a.buyPrice - b.buyPrice,
			  },
				{
			    title: '买入时间',
			    // dataIndex: 'openTime',
			    // key: 'buyTime',
			  	// sorter: (a, b) => a.openTime > b.openTime?1:-1,
					render:(text,row)=>{
						const {tradeType,openTime,closeTime}=row
						return moment(tradeType==='Buy'?openTime:closeTime).format('YYYY-MM-DD HH:mm:ss')
					}
			  },
				{
			    title: '卖出价格',
			    dataIndex: 'sellPrice',
			    key: 'sellPrice',
			  	sorter: (a, b) => a.sellPrice - b.sellPrice
			  },
				{
			    title: '卖出时间',
					render:(text,row)=>{
						const {tradeType,openTime,closeTime}=row
						return moment(tradeType==='Buy'?closeTime:openTime).format('YYYY-MM-DD HH:mm:ss')
					}
			  },
				{
			    title: '交易数量',
			    dataIndex: 'quantity',
			    key: 'quantity',
			  	sorter: (a, b) => a.quantity - b.quantity,
			  },
				{
			    title: '费用',
					dataIndex: 'fee',
			    key: 'fee',
			  	sorter: (a, b) => a.fee - b.fee,
					render: text => text.toFixed(2)
			  },
				{
			    title: '盈亏',
			    render: (text, row) => {
			      const { tradeType, buyPrice, sellPrice, quantity, fee } = row;
			      return fx.colorMoney((sellPrice - buyPrice) * quantity - fee);
			    },
			  }
			],
			rowKey:row => (row.closeOrderId + row.openOrderId)
		}
		return(
			<Card bordered={false}   style={{marginRight:50}}>
				<Row className={style.info} gutter={0}>
					<Col span={7}>
						<h3 style={{textAlign:'left',marginBottom:10}}>交易详情</h3>
						<dl>
							<dt>单号</dt>
							<dd>{data.closeOrder.orderId}</dd>
						</dl>
						<dl>
							<dt>股票</dt>
							<dd>{data.closeOrder.symbol}</dd>
						</dl>
						<dl>
							<dt>类型</dt>
							<dd>{data.closeOrder.tradeType==='Sell'?'卖出':'买入'}</dd>
						</dl>
						<dl>
							<dt>价格</dt>
							<dd>{data.closeOrder.price.toFixed(2)}</dd>
						</dl>
						<dl>
							<dt>数量</dt>
							<dd>{data.closeOrder.quantity}</dd>
						</dl>
						<dl>
							<dt>费用</dt>
							<dd>{data.closeOrder.fee.toFixed(2)}</dd>
						</dl>
						<dl>
							<dt>时间</dt>
							<dd>{moment(data.closeOrder.timestamp).format('YYYY-MM-DD HH:mm:ss')}</dd>
						</dl>
						<dl style={{display: none}}>
							<dt>评语</dt>
							<dd>{data.commentClosed.comment}</dd>
						</dl>
						<img
							src={data.commentClosed.score >= 60 ? smileImg : sadImg }
							width='128'
						/>
					</Col>
					<Col span={17}>
						<KCharts data={data.kline} point={data.closeOrder.closedPositionList} />
					</Col>
				</Row>
				<Row>
					<Col>
						<Table
							{...tradeTableProps}
							pagination={false}
						/>
					</Col>
				</Row>
			</Card>
		)
	}else{
		return null
	}

}

TradeDetail.propTypes={
	// data
}

export default TradeDetail
